uni

2024-06-17 13:08| 来源: 网络整理| 查看: 265

前言

插件名：uQRCode uniapp扩展组件：uni-popup 技术栈：uni-app + Vue3 编码工具：HBuilder X 和微信开发者工具文章内容：实现点击创建订单成功之后，将后端返回的微信支付url转化为二维码的功能。

效果图

在这里插入图片描述

1、安装

官网地址：https://uqrcode.cn/doc/guide/getting-started.html

在HBuilder X的终端下载依赖

npm install uqrcodejs

在这里插入图片描述

下载完 HBuilder X项目中会自动多出一个node_modules依赖包，项目记得重启一下。在这里插入图片描述

2、页面使用

①、引入

import UQRCode from 'uqrcodejs';

②、创建url转二维码方法

// 将微信支付url转换为微信二维码 const formatWXPayToQRCode = (url) => { // 获取uQRCode实例 var qr = new UQRCode(); // 设置二维码内容 qr.data = "https://uqrcode.cn/doc/guide/getting-started.html#%E5%AE%89%E8%A3%85"; // 设置二维码大小，必须与canvas设置的宽高一致 qr.size = 200; // 调用制作二维码方法 qr.make(); // 获取canvas上下文 var canvasContext = uni.createCanvasContext('qrcode'); // 设置uQRCode实例的canvas上下文 qr.canvasContext = canvasContext; // 调用绘制方法将二维码图案绘制到canvas上 qr.drawCanvas(); } 3、用uniapp扩展组件的popup弹窗包裹

初始弹窗显/隐变量为什么要引入这个弹窗组件呢？因为我们要做的是创建完订单后就弹出一个框，框中有微信二维码这样的效果。 uQRCode其实就是将url用canvas画成一张二维码。

创建订单微信扫一扫请用本人微信扫描以上二维码 const QRCodePopup = ref(null) // 二维码

uni-popup需要定义一个ref对象，这个对象身上会携带很多方法，比如：弹窗的显/隐，一会就要用到。显示：QRCodePopup.value.open('center') 隐藏：QRCodePopup.value.close()

4、项目没有下载popup扩展组件的看这里，已下载的直接看第5。

1、下载链接：https://ext.dcloud.net.cn/plugin?name=uni-popup 2、步骤

在这里插入图片描述

在这里插入图片描述 3、项目自动新增uni_modules文件以及uni-popup，代表组件成功下载到项目中了。

5、创建订单成功用接口返回的微信支付url传入生成微信支付二维码 // 创建订单 const createOrder = (params) => { // 先显示二维码弹框，再调接口，返回的支付url给UQRCode函数，渲染展示到qrcode view标签上 QRCodePopup.value.open('center') let res_wx_code = 'weixin://wxpay/bizpayurl?pr=FmQEegPz3' formatWXPayToQRCode(res_wx_code) // 真实场景获取支付url是以下这个样子，获取之后放进去 /* app.globalData.utils.request({ url: '/pay/createOrder', method: 'POST', header: { token: uni.getStorageSync('token') }, data: params, success: res => { // 后端返回的支付URL字段，wx_code: "weixin://wxpay/bizpayurl?pr=FmQEegPz3" formatWXPayToQRCode(res.wx_code) // 核心在这里 }, fail: res => { console.log(res) }, }) */ } 5、关闭二维码弹窗 const closeQRCodePopup = () => { QRCodePopup.value.close() // 并跳转到订单列表 /* uni.navigateTo({ url: '../order/index' }) */ }

完整代码

创建订单微信扫一扫请用本人微信扫描以上二维码 import UQRCode from 'uqrcodejs'; import { ref } from "vue" const QRCodePopup = ref(null) // 二维码 // 将微信支付url转换为微信二维码 const formatWXPayToQRCode = (url) => { // 获取uQRCode实例 var qr = new UQRCode(); // 设置二维码内容 qr.data = url; // 设置二维码大小，必须与canvas设置的宽高一致 qr.size = 200; // 调用制作二维码方法 qr.make(); // 获取canvas上下文 var canvasContext = uni.createCanvasContext('qrcode'); // 设置uQRCode实例的canvas上下文 qr.canvasContext = canvasContext; // 调用绘制方法将二维码图案绘制到canvas上 qr.drawCanvas(); } // 创建订单 const createOrder = (params) => { // 先显示二维码弹框，再调接口，返回的支付url给UQRCode函数，渲染展示到qrcode view标签上 QRCodePopup.value.open('center') let res_wx_code = 'weixin://wxpay/bizpayurl?pr=FmQEegPz3' formatWXPayToQRCode(res_wx_code) // 真实场景获取支付url是以下这个样子，获取之后放进去 /* let params = { orderId: 12321,... } app.globalData.utils.request({ url: '/pay/createOrder', method: 'POST', header: { token: uni.getStorageSync('token') }, data: params, success: res => { // 后端返回的支付URL字段，wx_code: "weixin://wxpay/bizpayurl?pr=FmQEegPz3" formatWXPayToQRCode(res.wx_code) // 核心在这里 }, fail: res => { console.log(res) }, }) */ } // 关闭二维码弹窗 const closeQRCodePopup = () => { QRCodePopup.value.close() // 并跳转到订单列表 /* uni.navigateTo({ url: '../order/index' }) */ } .uni-popup__wrapper { border-radius: 20rpx; } .text-center { text-align: center; margin-top: 20rpx; margin-bottom: 20rpx; } .pay-box { padding: 40rpx; } .pay-box canvas { margin: 0 auto; }

【本文地址】

公司简介

联系我们